{% extends "website/base.html" %}
{% load static %}
{% block content %}

<section class="section">
  <div class="card">
    <div class="badges">
      <span class="badge">Clinical support</span>
      <span class="badge">Compassionate care</span>
      <span class="badge">Home-based</span>
    </div>
    <h1 class="h1" style="margin-top:10px">Our Services</h1>
    <p class="p">
      We provide professional, client-centered home care tailored to each individual’s needs. Every service is delivered
      with dignity, safety, and clear communication for families.
    </p>

    <div class="grid grid-3" style="margin-top:12px">
      <div class="card soft card-tight">
        <div class="card-title">
          <div class="icon">🎥</div>
          <div>
            <h3 class="h3">Online medical consultations</h3>
            <div class="small">Video, phone, and online chat</div>
          </div>
        </div>
        <p class="p">Speak with licensed doctors for assessments, advice, and follow-ups.</p>
      </div>
      <div class="card soft card-tight">
        <div class="card-title">
          <div class="icon">🧠</div>
          <div>
            <h3 class="h3">Mental health support</h3>
            <div class="small">Confidential psychosocial care</div>
          </div>
        </div>
        <p class="p">Talk to mental health professionals — supportive, private, compassionate.</p>
      </div>
      <div class="card soft card-tight">
        <div class="card-title">
          <div class="icon">🩹</div>
          <div>
            <h3 class="h3">Nursing follow-ups</h3>
            <div class="small">Virtual/physical assessments</div>
          </div>
        </div>
        <p class="p">Nursing assessments, recovery follow-ups, and treatment planning support.</p>
      </div>
    </div>

    <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px">
      <a class="btn btn-accent btn-sm" href="{% url 'website:telehealth_booking' %}">Book Telehealth</a>
      <a class="btn btn-ghost btn-sm" href="{% url 'website:care_request_step1' %}">Request Home Care</a>
    </div>

    <div class="sep" style="margin:14px 0"></div>

    <div class="view-toggle style="margin-top:14px">
  <button id="viewPhoto" class="active" type="button">Photo view</button>
  <button id="viewIll" type="button">Illustration view</button>
</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
      <a class="btn btn-accent" href="{% url 'website:telehealth_booking' %}">Book Telehealth</a>
      <a class="btn btn-accent" href="{% url 'website:care_request_step1' %}">Request Home Care</a>
      <a class="btn btn-primary" href="https://wa.me/{{ SITE_WHATSAPP }}?text=Hello%20Telehealthscare%20Services%2C%20I%20want%20to%20book%20a%20telehealth%20consultation%20or%20request%20home%20care." target="_blank">WhatsApp</a>
      <a class="btn" href="{% url 'website:care_process' %}">See care process</a>
    </div>
  </div>
</section>

<section class="section">
  <div class="grid grid-3">
    {% for s in services %}
      <div class="card hover">
        <div class="service-media">
          <img class="ph" src="{% static "website/img/services/" %}{{ s.service_key }}_photo.jpg" alt="{{ s.title }}">
          <img class="ill" src="{% static "website/img/services/" %}{{ s.service_key }}_illustration.svg" alt="{{ s.title }}">
        </div>
        <div class="card-title">
          <div class="icon">{{ s.icon }}</div>
          <div>
            <h3 class="h3">{{ s.title }}</h3>
            <div class="small">Professional support at home</div>
          </div>
        </div>

        <div class="sep"></div>
        <p class="p">{{ s.short_description }}</p>

        {% if s.who_its_for %}
          <div class="sep"></div>
          <div class="small"><b>Who it’s for:</b> {{ s.who_its_for }}</div>
        {% endif %}

        {% if s.benefits %}
          <div class="sep"></div>
          <div class="small"><b>Benefits:</b> {{ s.benefits }}</div>
        {% endif %}

        <div class="sep"></div>
        <div class="chips">
          <span class="chip">Safety-first</span>
          <span class="chip">Respect &amp; dignity</span>
          <span class="chip">Clear updates</span>
        </div>
      </div>
    {% empty %}
      <div class="card">
        Explore our professional home care, nursing, and telehealth services. Contact our team for a personalized care plan.
      </div>
    {% endfor %}
  </div>
</section>

{% endblock %}


<script>
(function(){
  const body = document.body;
  const btnPhoto = document.getElementById('viewPhoto');
  const btnIll = document.getElementById('viewIll');

  function setMode(mode){
    if(mode === 'ill'){
      body.classList.add('show-illustrations');
      btnIll && btnIll.classList.add('active');
      btnPhoto && btnPhoto.classList.remove('active');
      localStorage.setItem('hc_view_mode','ill');
    } else {
      body.classList.remove('show-illustrations');
      btnPhoto && btnPhoto.classList.add('active');
      btnIll && btnIll.classList.remove('active');
      localStorage.setItem('hc_view_mode','photo');
    }
  }

  const saved = localStorage.getItem('hc_view_mode') || 'photo';
  setMode(saved);

  btnPhoto && btnPhoto.addEventListener('click', function(e){ e.preventDefault(); setMode('photo'); });
  btnIll && btnIll.addEventListener('click', function(e){ e.preventDefault(); setMode('ill'); });
})();
</script>